<template>
  <component :is="detail ? 'div' : 'a'" :href="detail ? 'javascript:void(0)' : `/paper/${paper.paperId}`"
    target="__blank" class="paper-item" :class="{ references: !detail, 'detail-maxwidth': detail }">
    <a-typography-title class="title">
      <span v-if="paper.title">{{ paper.title }} </span>
      <a-space>
        <div v-if="detail" @click="closeDrawer" class="ic_closeDrawer"></div>
      </a-space>
    </a-typography-title>
    <a-typography-title v-if="paper.titleCh && paper.languageCode !== LANGUAGE_CODE.中文" class="title">
      <span v-if="paper.titleCh">{{ paper.titleCh }} </span>
    </a-typography-title>
    <a-space v-if="detail" style="margin: 20px 0;">
      <a-button v-if="paper.pdfUrl && hasPermission(paper)" @click.stop.prevent="() => open(paper.pdfUrl)">
        <img class="icon" src="@/assets/pdf.png" alt="" />PDF</a-button>
      <a-button v-if="paper.sourceLink && paper.documentType == '1'" @click.stop.prevent="() => open(paper.sourceLink)"><img class="icon"
          src="@/assets/paper.png" alt="" />原文</a-button>
    </a-space>

    <!-- <a-typography-paragraph v-if="paper.author || paper.releaseTime" class="content author">
      <span>{{ paper.author }}</span>
      <span>{{ getDate(paper.releaseTime) }}</span>
    </a-typography-paragraph> -->

    <a-typography-paragraph v-if="!detail" class="content" :class="{ brief: !detail }">
      摘要：{{ paper?.researchContent || '暂无摘要' }}
    </a-typography-paragraph>

    <div class="between">
      <a-space style="display: flex; flex-flow: row wrap">
        <MyTag v-for="t in [paper.modificationName]
          .concat(paper.mstMaterialPaperList.map((o) => o.materialNameEn))
          .filter((o) => !!o)
          .slice(0, 6)" :key="t" :title="t" class="keyword">
          {{ t }}
        </MyTag>
      </a-space>
      <span>&nbsp;</span>
      <a-space v-if="!detail">
        <a-button v-if="paper.pdfUrl && hasPermission(paper)" @click.stop.prevent="() => open(paper.pdfUrl)">
          <img class="icon" src="@/assets/pdf.png" alt="" /> PDF</a-button>
        <a-button v-if="paper.sourceLink && paper.documentType == '1'" @click.stop.prevent="() => open(paper.sourceLink)"><img class="icon"
            src="@/assets/paper.png" alt="" /> 原文</a-button>
      </a-space>
    </div>

    <a-space v-if="detail" class="mg-24">
      <MyTag v-for="tag in paper.discipline?.map((o) => o.subDiscipline)" :key="tag" :title="tag" class="discipline">
        {{ tag }}
      </MyTag>
    </a-space>

    <template v-if="detail">
      <div v-if="paper.documentType == '1'" class="title-box"><div class="title">发表渠道</div><div>{{ paper?.journal || '暂无发表渠道' }}</div></div>
      <div v-if="paper.documentType == '1'" class="title-box"><div class="title">发表时间</div><div>{{ getDate(paper?.releaseTime) || '暂无发表时间' }}</div></div>
      <div v-if="paper.documentType == '2'" class="title-box"><div class="title">专利人</div><div>{{ paper?.author || '暂无发表时间' }}</div></div>
      <a-typography-title class="title">{{paper.researchContentCh?'Abstract':'摘要'}}  </a-typography-title>
      <a-typography-paragraph class="content" :class="{ brief: !detail }">{{ paper?.researchContent || '暂无摘要' }}
      </a-typography-paragraph>
      <a-typography-title v-if="paper.researchContentCh && paper.languageCode !== LANGUAGE_CODE.中文" class="title"> 摘要 </a-typography-title>
      <a-typography-paragraph v-if="paper.researchContentCh && paper.languageCode !== LANGUAGE_CODE.中文" class="content" :class="{ brief: !detail }">{{ paper?.researchContentCh || '暂无摘要' }}
      </a-typography-paragraph>
    </template>

    <template v-if="detail">
      <a-typography-title class="title">材料列表</a-typography-title>
      <a-table class="mg-24 paper-table" :bordered="true" :columns="columns" :data-source="paper.mstMaterialPaperList"
        :pagination="false" row-class-name="paper-table-row" :transform-cell-text="transformCellText" />

      <template v-if="paper.researchObjective">
        <a-typography-title class="title">研究目的</a-typography-title>
        <a-typography-paragraph class="content">
          {{ paper.researchObjective }}
        </a-typography-paragraph>
      </template>

      <template v-if="paper.researchConclusion">
        <a-typography-title class="title">研究结论</a-typography-title>
        <a-typography-paragraph class="content">
          {{ paper.researchConclusion }}
        </a-typography-paragraph>
      </template>
      <template v-if="paper.mstChartList.length > 0">
         <a-typography-title class="title">图表</a-typography-title>
         <a-typography-paragraph class="content img-box" >
          <div v-for="(img, index) in paper.mstChartList" :key="index"  class="img-item">
            <a-image :src="img.url" height="266px" alt="" />
            <div class="img-caption">{{ '图'+ (index +1) }}.{{ img.caption }}</div>
          </div>
         </a-typography-paragraph>
      </template>
    </template>
  </component>
  <a-divider />
</template>
<script lang="ts" setup>
import type { TableProps } from 'ant-design-vue'
import type { IMstPaper } from '@/api/dialog'
import { getDateCN as getDate } from '@/utils'
import { ref, defineProps } from 'vue'
import MyTag from './MyTag.vue'
import { useUserInfoStore } from '@/stores/modules/userInfo'
import { LANGUAGE_CODE } from '@/const'
const userInfo = useUserInfoStore()
const { detail } = defineProps<{ paper: IMstPaper; detail?: boolean }>()
const emit = defineEmits(['closeDrawer'])

function transformCellText({ text }: { text: string | undefined }) {
  console.log('text', text)
  if (!text) return '-'
  return text
}

const columns = ref<TableProps['columns']>([
  {
    title: '材料名称',
    dataIndex: 'materialNameEn',
    customRender({ value, record }) {
      if (!value) return record.materialNameCh
      const chname = record.materialNameCh
      if (!chname) return value
      return `${value}（${chname}）`
    }
  },
  {
    title: '材料类型',
    dataIndex: 'materialType'
  }
])

function open(url: string) {
  window.open(url)
}
const closeDrawer = () => {
  emit('closeDrawer')
}

const hasPermission = (paper: IMstPaper) => {
  return paper.isPublicAccess === '1' || (paper.isPublicAccess === '0' && userInfo.authorityStatus === 1)
}
</script>
<style lang="scss" scoped>
.paper-item {
  display: block;
  border-radius: 4px;
  padding: 0 16px;

  &:hover {
    // background: #f8fafc;
  }

  &.references {
    padding: 16px;
  }

  &.detail-maxwidth {
    max-width: 1066px;
    margin: 0 auto;
  }
  .title-box{
    display: flex;
    margin-top: 1.2em;
    .title{
      color: #0D1C2E;
      line-height: 24px;
      margin-right: 20px;
    }
  }
  .img-box{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .img-item{
      width: 32%;
      overflow: hidden;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      .img-caption{
        text-align: center;
        padding: 16px 0 18px;
      }
      :deep() {
        .ant-image-img {
          object-fit: contain;
        }
      }
    }
  }
}

.ic_closeDrawer {
  background-image: url('@/static/image/ic_closeDrawer.png');
  background-size: 20px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.title {
  // font-size: 18px;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 16px;
  // font-weight: 600;
  line-height: 24px;

  /* 字体/黑 */
  color: #292929;
}

.content {
  margin-bottom: 16px;

  &.brief {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  &.author {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
  }
}
</style>
<style lang="scss">
.paper-table {
  .ant-table-thead>tr>th {
    font-size: 14px;
    color: #707c97;
    background: #f3f4f6;
  }
}

.paper-table-row {
  font-size: 14px;
  color: #0d1c2e;
}

.icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.button-in-detail {
  position: absolute;
  right: 32px;
  top: 32px;
}

.between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ant-divider-horizontal {
  margin: 8px 0;
}
</style>
